<template>
    <div class="relative">
        <img src="http://or9v0p9za.bkt.clouddn.com/downloadPc.png" style="height: 100vh; width: 100vw" class="absolute pin-l pin-t">
        <div class="register-page">
            <el-card class="z-10 px-8">
                <div class="title mb-4">企业账号注册</div>
                <el-form :model="form" :rules="rules" ref="form" label-position="left" @keyup.enter.native="register" label-width="80px">
                    <template v-if="type == 1">
                        <el-form-item prop="name" label="企业名称">
                            <el-input class="w-full" :autofocus="true" placeholder="请输入企业全称" v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item prop="contacts" label="联系人">
                            <el-input class="w-full" :autofocus="true" placeholder="请输入联系人姓名" v-model="form.contacts"></el-input>
                        </el-form-item>
                        <el-form-item prop="telephone" label="联系方式">
                            <el-input class="w-full" :autofocus="true" placeholder="请输入手机号" v-model="form.telephone"></el-input>
                        </el-form-item>
                        <el-form-item prop="email" label="公司邮箱">
                            <el-input class="w-full" :autofocus="true" placeholder="默认作为登录帐号" v-model="form.email"></el-input>
                        </el-form-item>
                        
                    </template>
                   
                    <el-form-item class="center pt-4">
                        <el-button type="primary" @click="register" :loading="isBtnLoading">{{btnText}}</el-button>
                    </el-form-item>
                   

                </el-form>
            </el-card>
        </div>
    </div>
</template>

<script>
    import {Input, Switch, Form, FormItem , Row , Col , MessageBox  } from 'element-ui';
    import QRCode from 'qrcode'
    export default {
        components: {
            ElInput: Input,
            ElSwitch: Switch,
            ElForm: Form,
            ElFormItem: FormItem,
            ElRow: Row,
            ElCol: Col
        },
        props: [],
        data() {
            return {
                form: null,
                rules: {
                    name: [
                        {required: true, message: '请输入企业名称', trigger: 'blur'}
                    ],
                    contacts: [
                        {required: true, message: '请输入联系人', trigger: 'blur'}
                    ],
                    telephone: [
                        {required: true, message: '请输入联系方式', trigger: 'blur'},
                        {pattern: /^1(3[0-9]|4[57]|5[0-35-9]|8[0-9]|70)\d{8}$/, message: '请输入正确手机号码', trigger: 'change'}
                    ],
                    email:[
                         {required: true,  message: '请输入公司邮箱', trigger: 'blur'},
                         {type:'email' , message: '请输入正确公司邮箱', trigger: 'change' }
                    ]
                },
                type: 1, // 1: 账号密码, 0: 手机号验证码
                isBtnLoading: false,
                seconds: 60,
                stop: false,
                sha256: require('js-sha256'),
                randomUid:'',  //随机uid,
                qrcodeImg:'',
                timeOut:null
            };
        },
        computed: {
            btnText() {
                if (this.isBtnLoading) return '申请中...';
                return '开始申请';
            }
        },
        watch: {
            type(curVal) {
                this.createForm();                
            }
        },
        methods: {
        
            register() {
                this.$refs.form.validate((valid) => {
                    if (!valid) return;
                    this.isBtnLoading = true;

                    let url ='company/apply';
                    API.post(url, this.form).then((res) => {
                        console.log(res)
                        // SessionStore.set('registerMesg', res, res.expireAt);
                        // this.fetchUser(res.expireAt);
                        if(res._id){
                            MessageBox.alert('申请成功！审核通过后将通知您。','企业账号注册',{
                                confirmButtonText: '确定',
                                type:'success',
                                callback: action => {
                                    this.$router.push('/login');
                                }
                            })
                        }else{
                            MessageBox.alert('操作失败，请重试！','企业账号注册',{
                                confirmButtonText: '确定',
                                type:'error',
                                callback: action => {
                                    this.form = {
                                        name:'',
                                        contacts:'',
                                        telephone:'',
                                        email:'',
                                    };
                                }
                            })
                        }
                    }).finally(() => this.isBtnLoading = false);
                });
            },
            // 获取用户信息，并跳转
            fetchUser(expire) {
                // get user info
                API.get('users/profile').then(response => {
                    SessionStore.set('userMesg', response.user, expire);
                    this.$router.push('/');
                }).finally(() => this.isBtnLoading = false);
            },
            createForm() {
                this.form = {
                    name:'',
                    contacts:'',
                    telephone:'',
                    email:'',
                };
            },
        },
        created() {
            this.createForm();
        },
    };
</script>

<style lang="scss">
    .register-page {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        // background: #fff url('http://or9v0p9za.bkt.clouddn.com/downloadPc.png') center/cover no-repeat;

        .el-card{
            width: 100%;
            max-width: 530px;
        }

        .title {
            color: #20a0ff;
            font-weight: bold;
            font-size: 30px;
            text-align: center;
            line-height: 2.2;
            font-family: sans-serif;
        }

        .el-button{
            width: 100%;
        }

    }
</style>
